<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Learning About Backbone.js View</title>


</head>
<body>

	<div id="container">
		<button>Load</button>
		<ul id="list">
		</ul>
	</div>

	<div id="list-template">
		<li><a href=""></a></li>
	</div>



	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript"
		src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script type="text/javascript"
		src="http://documentcloud.github.com/backbone/backbone-min.js"></script>



	<script type="text/javascript">
model = new Backbone.Model({
    data:[
        { text: "Google", href: "http://google.com" },
        { text: "Facebook", href: "http://facebook.com" },
        { text: "Youtube", href: "http://youtube.com" }
    ]
});




//define states to the html page
var View = Backbone.View.extend({
    initialize: function () {
        this.template = $('#list-template').children();
    },
    el: '#container',
    events: {
        "click button": "render"
    },
    render: function() {
        var data = this.model.get('data');

        this.$el.find('ul').html('');
       
        for (var i=0, l=data.length; i<l; i++) {
            var li = this.template.clone();
            var a = li.find('a');
            //set attribute 'href'
            a.attr('href', data[i].href);
            //set text with 'text' model
            a.text(data[i].text).end();
            
            this.$el.find('ul').append(li);
        }
    }
});


var view = new View({ model: model });

</script>

</body>
</html>